<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 500px;
				height: 500px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">	
			<canvas id="canvasone" width="500" height="500"></canvas>
			<input type="button" value="笔" onclick="bi();"/>  
			<input type="button" value="实心矩形" onclick="qqq();"/> 
			<input type="button" value="实心圆" onclick="sxy();"/>  
			<input type="button" value="空心矩形" onclick="kxjx();"/>  
			<input type="button" value="空心圆" onclick="kxy();"/>  
		</div>
		<button onclick="a()">笔</button>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let ppen=oneCanvas.getContext('2d');
			
			 bi=function(){
				var  x,y;
				var flag=false;
				document.onmousedown=function(e){
				flag=true;
				x=e.pageX-oneCanvas.offsetLeft;
				y=e.pageY-oneCanvas.offsetTop;
				ppen.moveTo(x,y);					
   				document.onmousemove=function(e){
   					if(flag==true){
   						x=e.pageX-oneCanvas.offsetLeft;
					y=e.pageY-oneCanvas.offsetTop;
					ppen.lineTo(x,y);
					ppen.stroke();
   					}
   				}
   				
   				
   				document.onmouseup=function(e){
						flag=false;
					}
				}
			}
				
			var lastX=0,lastY=0;
			qqq=function(){
				var  x,y;
				var flag=false;
				document.onmousedown=function(e){
					flag=true;
					x=e.pageX-oneCanvas.offsetLeft;
					y=e.pageY-oneCanvas.offsetTop;
					x1=x;
					y1=y;
					document.onmousemove=function(e){
						
   					if(flag==true){
   						
						var x=e.pageX-oneCanvas.offsetLeft;
						var y=e.pageY-oneCanvas.offsetTop;
						ppen.clearRect(x1,y1,lastX,lastY);
						console.log(x-x1);
						console.log(y-y1);
						
						
						ppen.fillRect(x1,y1,x-x1,y-y1);
						lastX = x-x1;
						lastY = y-y1;
   						}
   					}
					document.onmouseup=function(e){
						flag=false;
					}
				}
				
			}
			
			sxy=function(){
				var  x,y;
				var flag=false;
				document.onmousedown=function(e){
					flag=true;
					x=e.pageX-oneCanvas.offsetLeft;
					y=e.pageY-oneCanvas.offsetTop;
					ppen.moveTo(x,y);
					document.onmousemove=function(e){
						if(flag==true){
							ppen.beginPath();
							ppen.clearRect(0,0,500,500);
							a=e.pageX-oneCanvas.offsetLeft;
							b=e.pageY-oneCanvas.offsetTop;
							q=(a-x)*(a-x);
							w=(b-y)*(b-y);
							r=Math.sqrt(q+w);
							console.log(r);
							ppen.arc(x,y,r,0,Math.PI/180*360,false);
							ppen.closePath();
							ppen.fillStyle='black';
							ppen.fill();
						}
					}
					document.onmouseup=function(e){
						flag=false;
					}
				}
				
			}
			kxjx=function(){
				var  x,y;
				var flag=false;
				document.onmousedown=function(e){
					flag=true;
					x=e.pageX-oneCanvas.offsetLeft;
					y=e.pageY-oneCanvas.offsetTop;
					ppen.moveTo(x,y);
					document.onmousemove=function(e){
						if(flag==true){
							ppen.clearRect(0,0,500,500);
							a=e.pageX-oneCanvas.offsetLeft;
							b=e.pageY-oneCanvas.offsetTop;
							q=a-x;
							w=b-y;
							ppen.strokeRect(x,y,q,w);
							
						}
					}
					document.onmouseup=function(e){
						flag=false;
					}
				}			
				}
			
				kxy=function(){
				var  x,y;
				var flag=false;
				document.onmousedown=function(e){
					flag=true;
					x=e.pageX-oneCanvas.offsetLeft;
					y=e.pageY-oneCanvas.offsetTop;
					ppen.moveTo(x,y);
					document.onmousemove=function(e){
						if(flag==true){
							ppen.beginPath();
							ppen.clearRect(0,0,500,500);
							a=e.pageX-oneCanvas.offsetLeft;
							b=e.pageY-oneCanvas.offsetTop;
							q=(a-x)*(a-x);
							w=(b-y)*(b-y);
							r=Math.sqrt(q+w);
							console.log(r);
							ppen.arc(x,y,r,0,Math.PI/180*360,false);
							ppen.closePath();
							ppen.strokeStyle='black';
							ppen.stroke();
						}
					}
					document.onmouseup=function(e){
						flag=false;
					}
				}
				
			}
			

		
		}
		
	</script>
</html>
